<template>
  <div class="cart">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      right-text="首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <van-swipe-cell v-for="item in $store.state.carts" :key="item.id">
      <van-card
        :num="item.amount"
        :price="item.product.price.toFixed(2)"
        :title="item.product.name"
        class="goods-card"
        :thumb="item.product.coverImage | dalImg"
      >
        <template #tag>
          <van-checkbox
            style="background-color: #ff149312"
            v-model="checked"
          ></van-checkbox>
        </template>
      </van-card>

      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>

    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carts: [],
      checked: false,
    };
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({
        name: "Home",
      });
    },
    onSubmit() {},
    onClickEditAddress() {},
  },
  computed: {},
};
</script>

<style scoped>
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}
</style>
